import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import { connect } from "dva";
import { message, Checkbox, Button, Tabs, List, Card, Col, Row, Modal, Spin } from "antd";
import KnowledgeCheckBox from "@/pages/robotManagement/knowledgeCheckBox";
import styles from "./index.less";
import menuCheck from "@/utils/menuCheck";
import KeywordReplay from "./KeywordReplay";
import { robotCategoryList } from "@/services/robotManagement";
import { ellipsis } from "@/utils/utils";
import UserSession from "@/UserSession";

import { docLibraryAppShare, docLibraryCategoryShare, docLibraryListShare, getRootCategoryInfo } from '@/services/knowledgeFile';
import { formConfigTabList } from "@/services/formInteraction";
const topBgColorList = ['#19C3F3', '#2B47E6', '#0076FE', '#FF7300']
const contentBgColor = [
	'linear-gradient(-45deg, #E3F9FF 0%, #FAFEFF 48%, #EDFBFF 100%)',
	'linear-gradient(-45deg, #EFF1FF 0%, #F9FAFD 48%, #EFF1FF 100%)',
	'linear-gradient(-45deg, #E8F2FE 0%, #F6F9FD 48%, #E8F2FE 100%)',
	'linear-gradient(-45deg, #FFF6EE 0%, #FDFAF8 48%, #FFF6EE 100%)'
]

const { TabPane } = Tabs;
class KnowledgeConfiguration extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			loadingList: false,
			loading: false,
			knowledgeList: [],
			atlasList: [],
			dialogList: [],
			fileList: [],
			keyWordList: [],
			checkedKnowledgeIds: [],
			checkedAtlasIds: [],
			checkedDialogIds: [],
			checkedFileIds: [],
			checkedKeyWordIds: [],
			knowledgeIndeterminate: false,
			atlasIndeterminate: false,
			dialogIndeterminate: false,
			fileIndeterminate: false,
			keyWordIndeterminate: false,
			checkAllForKnowledge: false,
			checkAllForAtlas: false,
			checkAllForDialog: false,
			checkAllForFile: false,
			checkAllForKeyWord: false,
			configurationType: "knowledge",
			saveLoading: false,
			showAddKnowledge: false,
			robotCategoryListQuery: {
				current: 1,
				size: 12,
			},
			robotCategoryList: [],
			robotCategoryTotal: 0,
			activeKey: 1,
			selectCategoryId: "",
			knowledgeType: [],

			checkedFormIds: [],
			formIndeterminate: false,
			checkAllForForm: false,
			formList: [],

      docQuery:{
        current:1,
        size:12
      },
      docInfo:{
        list:[],
        total:0,
        loading:false
      },
      knowledgeFileTenantId:"",
      fetchLoading:false
		};
	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this);
		};
		this.getRobotCategoryList();
	}

	getDataInfo = async (id, callback) => {
		let res = await getRootCategoryInfo({ id });
		console.log(res);
		callback(res);
	}

	getRobotCategoryList = () => {
		const { robotCategoryListQuery, activeKey } = this.state;
		const { applicationId } = this.props;
		this.setState({ loadingList: true }, async () => {
			const res = await robotCategoryList({
				...robotCategoryListQuery,
				urlPrefix: activeKey == 2 ? 1 : null,
				applicationId,
			});
			this.setState({
				robotCategoryList: res.records,
				robotCategoryTotal: res.total,
				loading: false,
				loadingList: false,
			});
		})
	};

	//获取分类信息
	getKnowledgeList = () => {
		const { configurationType } = this.state;
		switch (configurationType) {
			case "knowledge":
				this.getListForKnowledge();
				break;
			case "atlas":
				this.getListForAtlas();
				break;
			case "dialog":
				this.getListForDialog();
				break;
			case "keywordReply":
				this.getListForKeyWord();
				break;
			case "file":
				this.getListForFile();
				break;
			case "formInteraction":
				this.getListForFormList()
				break;
		}
	};

	/**
	 * 获取表单分类信息
	 */
	getListForFormList = async () => {
		const { dispatch, applicationId } = this.props;
		const { selectCategoryId, activeKey } = this.state;
		const res = await formConfigTabList({
			applicationId,
			categoryId: selectCategoryId,
			urlPrefix: activeKey == 2 ? 1 : null,
		});
		let checkedFormIds = [];
		for (const item of res) {
			if (item.check) {
				checkedFormIds.push(item.id);
			}
		};
		this.setState({
			formList: res, checkedFormIds,
			formIndeterminate: checkedFormIds.length > 0 && checkedFormIds.length < res.length,
			checkAllForForm: checkedFormIds.length === res.length && res.length != 0,
		})
	}

	/**
	 * 获取知识点分类信息
	 */
	getListForKnowledge = () => {
		const { dispatch, applicationId } = this.props;
		const { activeKey, selectCategoryId } = this.state;
		dispatch({
			type: "knowledgeConfiguration/fetchKnowledgeList",
			payload: {
				applicationId,
				categoryId: selectCategoryId,
				urlPrefix: activeKey == 2 ? 1 : null,
			},
			callback: (res) => {
				let checkedKnowledgeIds = [];
				// 知识点递归获取选中的知识点id
				function getChildren(data) {
					data.map((item) => {
						// console.log(item);
						if (item.children) {
							getChildren(item.children);
						}
						if (item.check) {
							checkedKnowledgeIds.push(item.id);
						}
					});
				};
				if (res.length) {
					getChildren(res);
				};
				this.setState({
					knowledgeList: res, checkedKnowledgeIds,
					knowledgeIndeterminate: checkedKnowledgeIds.length > 0 && checkedKnowledgeIds.length < res.length,
					checkAllForKnowledge: checkedKnowledgeIds.length === res.length && res.length != 0,
				});
			},
		});
	};

	/**
	 * 获取知识导图分类信息
	 */
	getListForAtlas = () => {
		const { dispatch, applicationId } = this.props;
		const { selectCategoryId, activeKey } = this.state;
		dispatch({
			type: "knowledgeConfiguration/fetchAtlasList",
			payload: {
				applicationId,
				categoryId: selectCategoryId,
				urlPrefix: activeKey == 2 ? 1 : null,
			},
			callback: (res) => {
				let checkedAtlasIds = [];
				//图谱
				for (const item of res) {
					if (item.check) {
						checkedAtlasIds.push(item.id);
					}
				};
				this.setState({
					atlasList: res, checkedAtlasIds,
					atlasIndeterminate: checkedAtlasIds.length > 0 && checkedAtlasIds.length < res.length,
					checkAllForAtlas: checkedAtlasIds.length === res.length && res.length != 0,
				});
			},
		});
	};

	/**
	 * 获取多轮会话分类信息
	 */
	getListForDialog = () => {
		const { dispatch, applicationId } = this.props;
		const { selectCategoryId, activeKey } = this.state;
		dispatch({
			type: "knowledgeConfiguration/fetchDialogList",
			payload: {
				applicationId,
				categoryId: selectCategoryId,
				urlPrefix: activeKey == 2 ? 1 : null,
			},
			callback: (res) => {
				let checkedDialogIds = [];
				//多轮会话
				for (const item of res) {
					if (item.check) {
						checkedDialogIds.push(item.id);
					}
				};
				this.setState({
					dialogList: res, checkedDialogIds,
					dialogIndeterminate: checkedDialogIds.length > 0 && checkedDialogIds.length < res.length,
					checkAllForDialog: checkedDialogIds.length === res.length && res.length != 0,
				});
			},
		});
	};

	/**
	 * 获取关键词回复分类信息
	 */
	getListForKeyWord = () => {
		const { dispatch, applicationId, } = this.props;
		const { selectCategoryId } = this.state;
		dispatch({
			type: "knowledgeConfiguration/fetchKeyWordList",
			payload: { applicationId, rootCategoryId: selectCategoryId, },
			callback: (res) => {
				let checkedKeyWordIds = [];
				//关键词回复
				for (const item of res) {
					if (item.check) {
						checkedKeyWordIds.push(item.id);
					}
				};
				this.setState({
					keyWordList: res, checkedKeyWordIds,
					keyWordIndeterminate: checkedKeyWordIds.length > 0 && checkedKeyWordIds.length < res.length,
					checkAllForKeyWord: checkedKeyWordIds.length === res.length && res.length != 0,
				});
			},
		});
	};

	/**
	 * 获取文档知识点分类信息
	 */
	getListForFile = async () => {
		const { dispatch, applicationId } = this.props;
		const { activeKey, selectCategoryId } = this.state;
    this.setState({fetchLoading:true},async () => {
      const res = await docLibraryCategoryShare({
        applicationId,
        categoryId: selectCategoryId,
      })
      let checkedFileIds = [];
      // 知识点递归获取选中的知识点id
      function getChildren(data) {
        data.map((item) => {
          // console.log(item);
          if (item.children) {
            getChildren(item.children);
          }
          if (item.check) {
            checkedFileIds.push(item.id);
          }
        });
      };
      if (res.length) {
        getChildren(res);
      };
      this.setState({
        fileList: res, checkedFileIds,
        fileIndeterminate: checkedFileIds.length > 0 && checkedFileIds.length < res.length,
        checkAllForFile: checkedFileIds.length === res.length && res.length != 0,
        fetchLoading:false
      });
    })
    
	}

	/**
	 * 知识点分类全选按钮change事件
	 * @param e
	 */
	onCheckAllChangeForKnowledge = (e) => {
		const { knowledgeList } = this.state;
		const knowledgeIdList = knowledgeList.map((item) => item.id);
		this.setState({
			checkedKnowledgeIds: e.target.checked ? knowledgeIdList : [],
			checkAllForKnowledge: e.target.checked,
			knowledgeIndeterminate: false,
		});
	};

	/**
	 * 图谱分类全选按钮change事件
	 * @param e
	 */
	onCheckAllChangeForAtlas = (e) => {
		const { atlasList } = this.state;
		const atlasIdList = atlasList.map((item) => item.id);
		this.setState({
			checkedAtlasIds: e.target.checked ? atlasIdList : [],
			checkAllForAtlas: e.target.checked,
			atlasIndeterminate: false,
		});
	};

	/**
	 * 多轮会话全选按钮change事件
	 * @param e
	 */
	onCheckAllChangeForDialog = (e) => {
		const { dialogList } = this.state;
		const dialogIdList = dialogList.map((item) => item.id);
		this.setState({
			checkedDialogIds: e.target.checked ? dialogIdList : [],
			checkAllForDialog: e.target.checked,
			dialogIndeterminate: false,
		});
	};

	/**
	 * 文档知识点全选按钮change事件
	 * @param e
	 */
	onCheckAllChangeForFile = (e) => {
		const { fileList } = this.state;
		const fileIdList = fileList.map((item) => item.id);
		this.setState({
			checkedFileIds: e.target.checked ? fileIdList : [],
			checkAllForFile: e.target.checked,
			fileIndeterminate: false,
		});
	};

	/**
	 * 关键词回复全选按钮change事件
	 * @param e
	 */
	onCheckAllChangeForKeyWord = (e) => {
		const { keyWordList } = this.state;
		const keyWordIdList = keyWordList.map((item) => item.id);
		this.setState({
			checkedKeyWordIds: e.target.checked ? keyWordIdList : [],
			checkAllForKeyWord: e.target.checked,
			keyWordIndeterminate: false,
		});
	};

	/**
 * 表单分类全选按钮change事件
 * @param e
 */
	onCheckAllChangeForForm = (e) => {
		const { formList } = this.state;
		const formIdList = formList.map((item) => item.id);
		this.setState({
			checkedFormIds: e.target.checked ? formIdList : [],
			checkAllForForm: e.target.checked,
			formIndeterminate: false,
		});
	};

	/**
	 * 知识点分类复选框change事件
	 * @param checkedList
	 */
	onChangeForKnowledge = (checkedList) => {
		const { knowledgeList } = this.state;
		const knowledgeIdList = knowledgeList.map((item) => item.id);
		this.setState({
			checkedKnowledgeIds: checkedList,
			knowledgeIndeterminate: !!checkedList.length && checkedList.length < knowledgeIdList.length,
			checkAllForKnowledge: checkedList.length === knowledgeIdList.length,
		});
	};

	/**
	 * 图谱分类复选框change事件
	 * @param checkedList
	 */
	onChangeForAtlas = (checkedList) => {
		const { atlasList } = this.state;
		const atlasIdList = atlasList.map((item) => item.id);
		this.setState({
			checkedAtlasIds: checkedList,
			atlasIndeterminate: !!checkedList.length && checkedList.length < atlasIdList.length,
			checkAllForAtlas: checkedList.length === atlasIdList.length,
		});
	};

	/**
	 * 多轮会话分类复选框change事件
	 * @param checkedList
	 */
	onChangeForDialog = (checkedList) => {
		const { dialogList } = this.state;
		const dialogIdList = dialogList.map((item) => item.id);
		this.setState({
			checkedDialogIds: checkedList,
			dialogIndeterminate: !!checkedList.length && checkedList.length < dialogIdList.length,
			checkAllForDialog: checkedList.length === dialogIdList.length,
		});
	};

	/**
	 * 文档知识点分类复选框change事件
	 * @param checkedList
	 */
	onChangeForFile = (checkedList) => {
		const { fileList } = this.state;
		const fileIdList = fileList.map((item) => item.id);
		this.setState({
			checkedFileIds: checkedList,
			fileIndeterminate: !!checkedList.length && checkedList.length < fileIdList.length,
			checkAllForFile: checkedList.length === fileIdList.length,
		});
	};

	/**
	 * 关键回复分类复选框change事件
	 * @param checkedList
	 */
	onChangeForKeyWord = (checkedList) => {
		const { keyWordList } = this.state;
		const keyWordIdList = keyWordList.map((item) => item.id);
		this.setState({
			checkedKeyWordIds: checkedList,
			keyWordIndeterminate: !!checkedList.length && checkedList.length < keyWordIdList.length,
			checkAllForKeyWord: checkedList.length === keyWordIdList.length,
		});
	};

	/**
	   * 表单分类复选框change事件
	   * @param checkedList
	   */
	onChangeForForm = (checkedList) => {
		const { formList } = this.state;
		const formIdList = formList.map((item) => item.id);
		this.setState({
			checkedFormIds: checkedList,
			formIndeterminate: !!checkedList.length && checkedList.length < formIdList.length,
			checkAllForForm: checkedList.length === formIdList.length,
		});
	};

	/**
	 * 保存-loading
	 */
	onSave = () => {
		this.setState({ saveLoading: true }, () => {
			this.doSaveDispatch();
		});
	};

	/**
	 * {formatMessage({ id: 'knowledgeConfig.saveRequest' })}
	 */
	doSaveDispatch = () => {
		const {
			checkedKnowledgeIds, checkedAtlasIds, checkedDialogIds, checkedFileIds,
			configurationType, checkedKeyWordIds, activeKey, selectCategoryId, checkedFormIds
		} = this.state;
		const { dispatch, applicationId } = this.props;
		let url = "";
		let obj = {};
		switch (configurationType) {
			case "knowledge":
				url = "knowledgeConfiguration/saveCheckedKnowledgeIds";
				obj.qaCategoryIds = checkedKnowledgeIds;

				break;
			case "atlas":
				url = "knowledgeConfiguration/saveCheckedAtlasIds";
				obj.atlasCategoryIds = checkedAtlasIds;
				break;
			case "dialog":
				url = "knowledgeConfiguration/saveCheckedDialogIds";
				obj.dialogCategoryIds = checkedDialogIds;
				break;
			case "keywordReply":
				url = "knowledgeConfiguration/saveCheckedKeyWordIds";
				obj.keywordIds = checkedKeyWordIds;
				break;
			case "file":
				obj.docCategoryIds = checkedFileIds;
        obj.sys = false;
        obj.applicationId = applicationId;
        obj.libraryId = selectCategoryId;
        this.fileDoSave(obj)
				return false
			case "formInteraction":
				url = "knowledgeConfiguration/saveCheckedFormIds";
				obj.formCategoryIds = checkedFormIds;
				break;
		};
		obj.sys = activeKey == 2;
		obj.applicationId = applicationId;
		obj.rootCategoryId = selectCategoryId;
		dispatch({
			type: url,
			payload: obj,
			callback: (res) => {
				this.setState({ saveLoading: false }, () => {
					if (!res.code) {
						message.info(res.message);
					};
					this.getKnowledgeList();
					this.setState({
						// showAddKnowledge: false,
						// selectCategoryId: "",
						// knowledgeList: [],
						// atlasList: [],
						// dialogList: [],
						// configurationType: 'knowledge',
					}, () => {
						this.getRobotCategoryList()
					});
				});
			},
		});
	};

	/**
	 * {formatMessage({ id: 'knowledgeConfig.selectAllChange' })}
	 * @returns {*}
	 */
	onCheckAllChange = (e, type) => {
		const that = this;
		switch (type) {
			case "knowledge":
				that.onCheckAllChangeForKnowledge(e);
				break;
			case "atlas":
				that.onCheckAllChangeForAtlas(e);
				break;
			case "dialog":
				that.onCheckAllChangeForDialog(e);
				break;
			case "keywordReply":
				that.onCheckAllChangeForKeyWord(e);
				break;
			case "file":
				that.onCheckAllChangeForFile(e);
				break;
			case "formInteraction":
				this.onCheckAllChangeForForm(e);
				break;
		}
	};

	/**
	 * {formatMessage({ id: 'knowledgeConfig.categoryCheckboxChange' })}
	 * @returns {*}
	 */
	onCheckListChange = (checkedList, type) => {
		const that = this;
		switch (type) {
			case "knowledge":
				that.onChangeForKnowledge(checkedList);
				break;
			case "atlas":
				that.onChangeForAtlas(checkedList);
				break;
			case "dialog":
				that.onChangeForDialog(checkedList);
				break;
			case "keywordReply":
				that.onChangeForKeyWord(checkedList);
				break;
			case "file":
				that.onChangeForFile(checkedList);
				break;
			case "formInteraction":
				this.onChangeForForm(checkedList);
				break;
		}
	};

	/**
	 * {formatMessage({ id: 'knowledgeConfig.switchTab' })}
	 * @returns {*}
	 */
	changeTab = (key) => {
		this.setState({ configurationType: key }, () => {
			this.getKnowledgeList();
		});
	};

	setKnowledge = item => {
		this.getDataInfo(item.id, (res) => {
			let type = res ? res.type : [];
			this.setState({
				showAddKnowledge: true,
				selectCategoryId: item.id,
				knowledgeType: type,
				configurationType: type && type.length > 0 ? type[0] === 'qa' ? 'knowledge' : type[0] === 'graph' ? 'atlas' : type[0] : '',
			}, () => {
				console.log(type);
				if (type && type.length > 0) {
					switch (type[0]) {
						case "qa":
							this.getListForKnowledge();
							break;
						case "graph":
							this.getListForAtlas();
							break;
						case "dialog":
							this.getListForDialog();
							break;
						case "keywordReply":
							this.getListForKeyWord();
							break;
						case "file":
							this.getListForFile();
							break;
						case "formInteraction":
							this.getListForFormList();
							break;
					}
				} else {
					this.getListForKnowledge();
				}
			})
		});
	}

  //AIGC-获取文档库分类
  getDocLibraryList = () => {
    const { docQuery } = this.state;
    const { applicationId } = this.props;
    this.setState({
      docInfo:{
        list:[],
        total:0,
        loading:true
      }
    },async () => {
      const res = await docLibraryListShare({...docQuery,applicationId})
      this.setState({
        docInfo:{
          list:res.records,
          total:res.total,
          loading:false
        }
      })
    })
    
  }

  //AIGC-获取分类，打开配置页面
  setKnowledgeFile = item => {
    this.setState({
      showAddKnowledge: true,
      selectCategoryId: item.id,
      knowledgeType: 'file',
      configurationType: 'file',
      knowledgeFileTenantId:item.tenantId
    },() => {
      this.getListForFile();
    })
  }

  //AIGC-保存分享
  fileDoSave = async obj => {
    obj.tenantId = this.state.knowledgeFileTenantId
    const res = await docLibraryAppShare(obj)
    this.setState({ saveLoading: false }, () => {
      if (!res.code) {
        message.info(res.message);
      };
      this.getKnowledgeList();
      this.getDocLibraryList();
    });
  }

	render() {
		const {
			knowledgeList, knowledgeIndeterminate, checkAllForKnowledge, checkedKnowledgeIds,
			atlasList, atlasIndeterminate, checkedAtlasIds, checkAllForAtlas,
			dialogList, dialogIndeterminate, checkedDialogIds, checkAllForDialog,
			fileList, fileIndeterminate, checkedFileIds, checkAllForFile,
			configurationType, keyWordList, keyWordIndeterminate, checkedKeyWordIds, checkAllForKeyWord,
			saveLoading, showAddKnowledge, robotCategoryList, robotCategoryTotal, loading, knowledgeType,
			checkAllForForm, formIndeterminate, checkedFormIds, formList,
      docInfo,docQuery,fetchLoading
		} = this.state;

		return (
			<Spin spinning={loading}>
				<div className={styles.knowledge_configuration}>
					<Tabs
						onChange={(key) => {
							this.setState({ activeKey: key, loading: true, }, () => {
								if (key === "1") {
									this.setState({ configurationType: 'knowledge' }, () => {
										this.getRobotCategoryList();
									})
								}
								if (key === "2") {
									this.setState({ configurationType: 'knowledge' }, () => {
										this.getRobotCategoryList();
									})
								}
								if (key === "3") {
									this.setState({ configurationType: "keywordReply", loading: false, }, () => {
										this.getListForKeyWord();
									});
								}
                if(key == "5"){
                  this.setState({configurationType:"file",loading:false},() => {
                    this.getDocLibraryList()
                  })
                }
							});
						}}
					>
						<TabPane tab={formatMessage({ id: 'knowledgeConfig.myKnowledgeBase' })} key='1'>
							<List
								grid={{ gutter: 16, xl: 3, xxl: 3, lg: 2, md: 2, sm: 1, xs: 1 }}
								dataSource={robotCategoryList}
								loading={this.state.loadingList}
								pagination={{
									onChange: (page) => {
										let { robotCategoryListQuery } = this.state;
										robotCategoryListQuery.current = page;
										this.setState({ robotCategoryListQuery }, () => this.getRobotCategoryList())
									},
									pageSize: 12,
									total: robotCategoryTotal,
									showQuickJumper: true,
								}}
								renderItem={(item, index) => (
									<List.Item>
										<div className={styles.customCard}>
											<div className={styles.top} style={{ background: topBgColorList[index % 4] }}></div>
											<div className={styles.content} style={{ background: contentBgColor[index % 4] }}>
												<div className={styles.name}>{item.name}</div>
												<div className={styles.title}>
													<div className={styles.tag} style={{ background: item.isAll == 0 ? "#FF3444" : item.isAll == 1 ? "#F39800" : "#22AC38", }}>
														{item.isAll == 0 ? formatMessage({ id: 'knowledgeConfig.selectNone' }) : item.isAll == 1 ? formatMessage({ id: 'knowledgeConfig.selectPart' }) : formatMessage({ id: 'knowledgeConfig.selectAll' })}
													</div>
													<div className={styles.action} onClick={() => this.setKnowledge(item)}>
														<img src={staticPath + "/qaSettingH.png"} className={styles.settingImg} />
														<img src={staticPath + "/qaSetting.png"} className={styles.settingImgH} />
														<span>{formatMessage({ id: 'knowledgeConfig.configuration' })}</span>
													</div>
												</div>

												{item.type && item.type.length > 0 ? (
													<div className={styles.footer}>
														<Row>
															{item.type.indexOf('qa') > -1 ? (
																<Col span={Math.floor(24 / item.type.length)} className={styles.col} style={{ width: (100 / item.type.length) + '%' }}>
																	<div>{item.qaCount}</div>
																	<div>{formatMessage({ id: 'knowledgeConfig.QandA' })}</div>
																</Col>
															) : null}
															{item.type.indexOf('graph') > -1 ? (
																<Col span={Math.floor(24 / item.type.length)} className={styles.col} style={{ width: (100 / item.type.length) + '%' }}>
																	<div>{item.atlasCount}</div>
																	<div>{formatMessage({ id: 'knowledgeConfig.mindMap' })}</div>
																</Col>
															) : null}
															{item.type.indexOf('dialog') > -1 ? (
																<Col span={Math.floor(24 / item.type.length)} className={styles.col} style={{ width: (100 / item.type.length) + '%' }}>
																	<div>{item.dialogCount}</div>
																	<div>{formatMessage({ id: 'knowledgeConfig.multiRound' })}</div>
																</Col>
															) : null}
															{item.type.indexOf('doc') > -1 ? (
																<Col span={Math.floor(24 / item.type.length)} className={styles.col} style={{ width: (100 / item.type.length) + '%' }}>
																	<div>{item.docCount}</div>
																	<div>{formatMessage({ id: 'knowledgeConfig.document' })}</div>
																</Col>
															) : null}
															{item.type.indexOf('formInteraction') > -1 ? (
																<Col span={Math.floor(24 / item.type.length)} className={styles.col} style={{ width: (100 / item.type.length) + '%' }}>
																	<div>{item.formInteractionCount}</div>
																	<div>{formatMessage({ id: 'knowledgeConfig.form' })}</div>
																</Col>
															) : null}
															{item.type.indexOf('keywordReply') > -1 ? (
																<Col span={Math.floor(24 / item.type.length)} className={styles.col} style={{ width: (100 / item.type.length) + '%' }}>
																	<div>{item.formInteractionCount}</div>
																	<div>{formatMessage({ id: 'knowledgeConfig.keyword' })}</div>
																</Col>
															) : null}
														</Row>
													</div>
												) : null}
											</div>
										</div>
									</List.Item>
								)}
							/>
						</TabPane>
            <TabPane tab={formatMessage({ id: 'knowledgeConfig.documentLibrary' })} key='5'>
            <List
              grid={{ gutter: 16, xl: 3, xxl: 3, lg: 2, md: 2, sm: 1, xs: 1 }}
              dataSource={docInfo.list}
              loading={docInfo.loading}
              pagination={{
                onChange: (current) => {
                  let { docQuery } = this.state;
                  docQuery.current = current;
                  this.setState({ docQuery }, () => this.getDocLibraryList())
                },
                pageSize: docQuery.size,
                total: docInfo.total,
                showQuickJumper: true,
              }}
              renderItem={(item, index) => (
                <List.Item>
                  <div className={styles.customCard} style={{height:110}}>
                    <div className={styles.top} style={{ background: topBgColorList[index % 4],height:115 }}></div>
                    <div className={styles.content} style={{ background: contentBgColor[index % 4] }}>
                      <div className={styles.name}>{item.name}</div>
                      <div className={styles.title}>
                        <div className={styles.tag} style={{ background: item.isAll == 0 ? "#FF3444" : item.isAll == 1 ? "#F39800" : "#22AC38", }}>
                          {item.isAll == 0 ? formatMessage({ id: 'knowledgeConfig.selectNone' }) : item.isAll == 1 ? formatMessage({ id: 'knowledgeConfig.selectPart' }) : formatMessage({ id: 'knowledgeConfig.selectAll' })}
                        </div>
                        <div className={styles.action} onClick={() => this.setKnowledgeFile(item)}>
                          <img src={staticPath + "/qaSettingH.png"} className={styles.settingImg} />
                          <img src={staticPath + "/qaSetting.png"} className={styles.settingImgH} />
                          <span>{formatMessage({ id: 'knowledgeConfig.configuration' })}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </List.Item>
              )}
            />
          </TabPane>
						{/* <TabPane tab={formatMessage({ id: 'knowledgeConfig.keywordReply' })} key='3'>
							<KnowledgeCheckBox
								title={formatMessage({ id: 'knowledgeConfig.keywordReply' })}
								indeterminate={keyWordIndeterminate}
								list={keyWordList}
								checkData={checkedKeyWordIds}
								checkAllData={checkAllForKeyWord}
								onCheckAllChange={this.onCheckAllChange}
								onCheckListChange={this.onCheckListChange}
								type={"keywordReply"}
							/>
							<Button type={"primary"} onClick={this.onSave} style={{ marginLeft: 54 }} loading={saveLoading}>保存</Button>
						</TabPane> */}
					</Tabs>
					<Modal
						title={formatMessage({ id: 'knowledgeConfig.knowledgeConfiguration' })}
						visible={showAddKnowledge}
						width={800}
						onCancel={() =>
							this.setState(
								{
									showAddKnowledge: false,
									selectCategoryId: "",
									knowledgeList: [],
									atlasList: [],
									dialogList: [],
									configurationType: 'knowledge',
								},
								// () => {
								// 	this.getRobotCategoryList();
								// }
							)
						}
						footer={null}
						bodyStyle={{ padding: 0 }}
						destroyOnClose
					>
						<Tabs tabPosition={"left"} activeKey={configurationType} onChange={(key) => this.changeTab(key)} className={styles.knowledgeTab}>
							{knowledgeType.indexOf("file") > -1 ? (
								<Tabs.TabPane tab={formatMessage({ id: 'knowledgeConfig.documentKnowledge' })} key='file'>
									<KnowledgeCheckBox
										title={formatMessage({ id: 'knowledgeConfig.documentKnowledge' })}
										indeterminate={fileIndeterminate}
										list={fileList}
										checkData={checkedFileIds}
										checkAllData={checkAllForFile}
										onCheckAllChange={this.onCheckAllChange}
										onCheckListChange={this.onCheckListChange}
										type={"file"}
									/>
									<div className={styles.knowledgeTabBtn}>
										<Button type={"primary"} onClick={this.onSave} loading={saveLoading} disabled={fetchLoading}>{formatMessage({ id: 'knowledgeConfig.save' })}</Button>
									</div>
								</Tabs.TabPane>
							) : null}
							{knowledgeType.indexOf("qa") > -1 ? (
								<Tabs.TabPane tab={formatMessage({ id: 'knowledgeConfig.QAKnowledge' })} key='knowledge' style={{ textAlign: "left" }}>
									<KnowledgeCheckBox
										title={formatMessage({ id: 'knowledgeConfig.QAKnowledge' })}
										indeterminate={knowledgeIndeterminate}
										list={knowledgeList}
										checkData={checkedKnowledgeIds}
										checkAllData={checkAllForKnowledge}
										onCheckAllChange={this.onCheckAllChange}
										onCheckListChange={this.onCheckListChange}
										type={"knowledge"}
									/>
									<div className={styles.knowledgeTabBtn}>
										<Button type={"primary"} onClick={this.onSave} loading={saveLoading}>{formatMessage({ id: 'knowledgeConfig.save' })}</Button>
									</div>
								</Tabs.TabPane>
							) : null}
							{knowledgeType.indexOf("formInteraction") > -1 ? (
								<Tabs.TabPane tab={formatMessage({ id: 'knowledgeConfig.formKnowledge' })} key='formInteraction' style={{ textAlign: "left" }}>
									<KnowledgeCheckBox
										title={formatMessage({ id: 'knowledgeConfig.formKnowledge' })}
										indeterminate={formIndeterminate}
										list={formList}
										checkData={checkedFormIds}
										checkAllData={checkAllForForm}
										onCheckAllChange={this.onCheckAllChange}
										onCheckListChange={this.onCheckListChange}
										type={"formInteraction"}
									/>
									<div className={styles.knowledgeTabBtn}>
										<Button type={"primary"} onClick={this.onSave} loading={saveLoading}>{formatMessage({ id: 'knowledgeConfig.save' })}</Button>
									</div>
								</Tabs.TabPane>
							) : null}
							{knowledgeType.indexOf("graph") > -1 && UserSession.hasAtlasKnowledge() ? (
								<Tabs.TabPane tab={formatMessage({ id: 'knowledgeConfig.knowledgeMap' })} key='atlas' style={{ textAlign: "left" }}>
									<KnowledgeCheckBox
										title={formatMessage({ id: 'knowledgeConfig.knowledgeMap' })}
										indeterminate={atlasIndeterminate}
										list={atlasList}
										checkData={checkedAtlasIds}
										checkAllData={checkAllForAtlas}
										onCheckAllChange={this.onCheckAllChange}
										onCheckListChange={this.onCheckListChange}
										type={"atlas"}
									/>
									<div className={styles.knowledgeTabBtn}>
										<Button type={"primary"} onClick={this.onSave} loading={saveLoading}>{formatMessage({ id: 'knowledgeConfig.save' })}</Button>
									</div>
								</Tabs.TabPane>
							) : null}
							{knowledgeType.indexOf("dialog") > -1 && UserSession.hasAtlasKnowledge() ? (
								<Tabs.TabPane tab={formatMessage({ id: 'knowledgeConfig.multiRoundDialogue' })} key='dialog'>
									<KnowledgeCheckBox
										title={formatMessage({ id: 'knowledgeConfig.multiRoundDialogue' })}
										indeterminate={dialogIndeterminate}
										list={dialogList}
										checkData={checkedDialogIds}
										checkAllData={checkAllForDialog}
										onCheckAllChange={this.onCheckAllChange}
										onCheckListChange={this.onCheckListChange}
										type={"dialog"}
									/>
									<div className={styles.knowledgeTabBtn}>
										<Button type={"primary"} onClick={this.onSave} loading={saveLoading}>{formatMessage({ id: 'knowledgeConfig.save' })}</Button>
									</div>
								</Tabs.TabPane>
							) : null}
							{knowledgeType.indexOf("keywordReply") > -1 ? (
								<Tabs.TabPane tab={formatMessage({ id: 'knowledgeConfig.keywordReply' })} key='keywordReply'>
									<KnowledgeCheckBox
										title={formatMessage({ id: 'knowledgeConfig.keywordReply' })}
										indeterminate={keyWordIndeterminate}
										list={keyWordList}
										checkData={checkedKeyWordIds}
										checkAllData={checkAllForKeyWord}
										onCheckAllChange={this.onCheckAllChange}
										onCheckListChange={this.onCheckListChange}
										type={"keywordReply"}
									/>
									<div className={styles.knowledgeTabBtn}>
										<Button type={"primary"} onClick={this.onSave} loading={saveLoading}>{formatMessage({ id: 'knowledgeConfig.save' })}</Button>
									</div>
								</Tabs.TabPane>
							) : null}
						</Tabs>
					</Modal>
				</div>
			</Spin>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(KnowledgeConfiguration);
